@()(implicit session: Session)

@config.main("Cultivars") {

    <style>

        .fruit{
            border:1px solid #dddddd;
            border-radius: 10px;
            padding: 10px;
            text-align: center;
            margin-top: 20px;
        }

        .fruit-img{
            max-width: 300px;
            max-height: 250px;
        }

        .fruit-p{
            margin-top: 10px;
        }

    </style>

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Cultivars")

            <div class="main-body">

                <div id="img" style="display: flex;flex-wrap: wrap;justify-content: space-between">

                </div>

            </div>
        </div>
    </div>

    <script>

        $(function (){

            $.post("@routes.FruitController.getAllFruitImg",(data)=>{

                let html = ""
                $.each(data,(i,v)=>{
                     html +=  `<a data-fancybox="group" href="/COADB/cultivars/getFruitImage/${v}" class="fruit"><img src="/COADB/cultivars/getFruitImage/${v}" class="fruit-img"/>
<p class="fruit-p">${v}</p></a>`

                })

                $("#img").html(html)

              })

        })

    </script>

}